<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
        
        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
    </head>

    <body>
        <style>
            .hc-groovy {
                display: flex;
                /*  min-height: 800px!important;
                height: 100%; */
            }

            .hc-groovy-panel {
                border: 1px solid #DCDFE6;
                min-width: 120px;
                max-width: 240px;
                width: 20%;
                border-radius: 4px;
            }

            .hc-groovy-panel:hover {
                border: 1px solid lightgray;
            }

            .hc-groovy-editor {
                margin: 0px;
                padding: 0px;
                border: 1px solid #DCDFE6;
                width: 100%;
                border-radius: 4px;
            }

            .hc-groovy-editor[readonly] {
                margin: 0px;
                padding: 0px;
                border: 1px solid #DCDFE6;
                width: 100%;
                border-radius: 4px;
                background-color: ghostwhite;
            }

            .hc-groovy-editor:hover {
                margin: 0px;
                padding: 0px;
                border: 1px solid #DCDFE6;
                width: 100%;
                border-radius: 4px;
                border: 1px solid lightgray;
            }

            .ace_gutter {
                /* background-color: white!important; */
            }

            .hc-groovy-panel-title {
                font-size: larger;
                font-weight: bold;
                padding-left: 10px;
            }

            .el-collapse-item__content {
                padding-bottom: 8px;
                /*25px; */
            }

            .hc-groovy-item {}

            .hc-groovy-item:hover {}

            .hc-groovy-item[nodetype='category'] {
                cursor: default;
            }
        </style>
        <div id='app'>
            <hc-groovy-editor ref='editor' v-model="groovy" :readonly='donotedit'>
            </hc-groovy-editor>
        </div>



        <!-- <script src="/com/hc-groovy-editor.js"> </script> -->

        <script type='module'>
        
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
             import {} from "/com/hc-groovy-editor.js"
            // var vm;
            $rest.check$pinfoOrLoad(
                function() {
                    window.vm = new Vue({
                        el: '#app',
                        data: {
                            groovy: `
                    if(list)
                    {
                    	def max = list[0]
                    	list.forEach({max = it>max?it:max})
                    	
                    
                    	return max
                    }
                    else{
                        return null
                        
                    };
                    `,
                            donotedit: false,
                        },
                        methods: {

                        }
                    });
                }, 'xsxdjc/Main');
        </script>

    </body>

</html>
